# Component: Media Programs

Master collection for broadcast schedules and tickers

Broadcast Block

### BEM Anatomy

| Type      | Class Name            | Description                                                                         |
| --------- | --------------------- | ----------------------------------------------------------------------------------- |
| ==Block== | `.as-media-programs`  | The main wrapper. Contextual modifiers (`--ticker`, `--tickerlist`) dictate layout. |
| Element   | `__row`               | Bootstrap row for grid display. Overrides standard gutters using SCSS variables.    |
| Element   | `__column`            | The grid cell (responsive column) wrapping a standard program item.                 |
| Element   | `__content`           | A `list-group` container used exclusively for the `TickerList` display type.        |
| Element   | `__item`              | Individual program wrapper within the collection.                                   |
| Modifier  | `__item--current`     | Highlights items currently streaming. Applies `var(--bs-success)` border.           |
| Modifier  | `__item--future`      | Highlights upcoming items. Applies `var(--bs-warning)` border.                      |
| Modifier  | `__item--past`        | Highlights ended items. Applies `var(--bs-danger)` border.                          |
| Element   | `__title`             | Optional heading for the entire programs section (e.g., "Daily Schedule").          |
| Element   | `__pagination`        | Centered container for the "Load More" controls; manages spacing above the button.  |
| Element   | `__button`            | Base button styling for collection interactions.                                    |
| Modifier  | `__button--load-more` | Specific style for the button that fetches the next set of program data.            |
| Element   | `__state`             | Contextual container for non-content scenarios.                                     |
| Modifier  | `__state--loading`    | Active state during data fetch; may contain skeleton loaders or a spinner.          |
| Modifier  | `__state--empty`      | Displayed when no programs are scheduled for the selected time range.               |

### Conditional Layouts

This component orchestrates multiple sub-components based on the `CalendarDisplay` enum. It calculates the temporal state (Past, Current, Future) at the collection level to apply modifiers to the child cards.

##### Generated HTML (Ticker Mode)

```html
<div class="as-media-programs as-media-programs--ticker">
    <div class="as-media-programs__row row">
        <div class="as-media-programs__column col-md-4">
            <div class="as-media-programs__item as-media-programs__item--current">
                <!-- Card Content -->
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-programs {
  &__item {
    &--current {
      border-color: var(--bs-success);
      cursor: pointer;
    }
    &--past {
      border-color: var(--bs-danger);
    }
    &--future {
      border-color: var(--bs-warning);
    }
  }

  &__pagination {
    text-align: center;
    margin-top: 1.5rem;
  }
}
```
